<template>
  <div style="height:100%;overflow-y:auto">
    <Card>
      <Row style="text-align: center;">
        <h3>网络金融版个人信用报告</h3>
      </Row>
      </br>
      <Form :label-width="120" inline>
        <FormItem label="查询原因:" prop="">
          <Input placeholder="" v-model="EdcZxPersonalQueryInfo.cause" readonly></Input>
        </FormItem>
        <FormItem label="报告编号:" prop="">
          <Input placeholder="" v-model="EdcZxPersonalQueryInfo.reportNo" readonly></Input>
        </FormItem>
        <FormItem label="报告时间:" prop="">
          <Input placeholder="" :value="this.$util.loanModularFormatTime(EdcZxPersonalQueryInfo.reportDate)" readonly></Input>
        </FormItem>
      </Form>

      <Collapse v-model="value1">
        <Panel name="1">
          个人基本信息
          <div slot="content">
            <Form :label-width="120" inline>
              <FormItem label="姓名" prop="">
                <Input placeholder="" v-model="EdcZxPersonalBasicInfo.realName" readonly></Input>
              </FormItem>
              <FormItem label="证件号码" prop="">
                <Input placeholder="" v-model="EdcZxPersonalBasicInfo.cardNo" readonly></Input>
                <!-- EdcZxPersonalBasicInfo.cardType" readonly -->

              </FormItem>
              <FormItem label="性别" prop="">
                <Input placeholder="" v-model="EdcZxPersonalBasicInfo.sex" readonly></Input>
              </FormItem>
              <FormItem label="出生日期" prop="">
                <Input placeholder="" :value="this.$util.loanModularFormatTime(EdcZxPersonalBasicInfo.updatedDate)" readonly></Input>
              </FormItem>
              </br>
              <FormItem label="婚姻状况" prop="">
                <Input placeholder="" v-model="EdcZxPersonalBasicInfo.marry" readonly></Input>
              </FormItem>
              <FormItem label="信息获取日期" prop="">
                <Input placeholder="" :value="this.$util.loanModularFormatTime(EdcZxPersonalBasicInfo.marryDate)" readonly></Input>
              </FormItem>
              <FormItem label="最高学历" prop="">
                <Input placeholder="" v-model="EdcZxPersonalBasicInfo.education" readonly></Input>
              </FormItem>
              <FormItem label="信息获取日期" prop="">
                <Input placeholder="" :value="this.$util.loanModularFormatTime(EdcZxPersonalBasicInfo.educationDate)" readonly></Input>
              </FormItem>
              <br>
              <FormItem label="职称" prop="">
                <Input placeholder="" v-model="EdcZxPersonalBasicInfo.position" readonly></Input>
              </FormItem>
              <FormItem label="信息获取日期" prop="">
                <Input placeholder="" :value="this.$util.loanModularFormatTime(EdcZxPersonalBasicInfo.positionDate)" readonly></Input>
              </FormItem>
              <FormItem label="住宅电话" prop="">
                <Input placeholder="" v-model="EdcZxPersonalBasicInfo.residencePhone" readonly></Input>
              </FormItem>
              <FormItem label="信息获取日期" prop="">
                <Input placeholder="" :value="this.$util.loanModularFormatTime(EdcZxPersonalBasicInfo.residencePhoneDate)" readonly></Input>
              </FormItem>
              <br>
              <FormItem label="手机号码" prop="">
                <Input placeholder="" v-model="EdcZxPersonalBasicInfo.mobileNo" readonly></Input>
              </FormItem>
              <FormItem label="信息获取日期" prop="">
                <Input placeholder="" :value="this.$util.loanModularFormatTime(EdcZxPersonalBasicInfo.mobileNoDate)" readonly></Input>
              </FormItem>
              <FormItem label="电子邮箱" prop="">
                <Input placeholder="" v-model="EdcZxPersonalBasicInfo.mailbox" readonly></Input>
              </FormItem>
              <FormItem label="信息获取日期" prop="">
                <Input placeholder="" :value="this.$util.loanModularFormatTime(EdcZxPersonalBasicInfo.mailboxDate)" readonly></Input>
              </FormItem>
            </Form>
          </div>
        </Panel>
        <Panel name="2">
          地址信息
          <div slot="content">
            <Table :columns="AddrInfoListtwo" :data="AddrInfoList"></Table>
          </div>
        </Panel>
        <Panel name="3">
          职业信息
          <div slot="content">
            <Table :columns="UnitInfoListtwo" :data="UnitInfoList"></Table>
          </div>
        </Panel>
        <Panel name="4">
          配偶信息
          <div slot="content">
            <Form :label-width="120" inline>
              <FormItem label="配偶姓名" prop="">
                <Input placeholder="" v-model="EdcZxPersonalSpouseInfo.spouseName" readonly></Input>
              </FormItem>
              <FormItem label="证件号码" prop="">
                <Input placeholder="" v-model="EdcZxPersonalSpouseInfo.cardNo" readonly></Input>
                <!-- {{EdcZxPersonalSpouseInfo.cardType" readonly > -->
              </FormItem>
              <FormItem label="配偶性别" prop="">
                <Input placeholder="" v-model="EdcZxPersonalSpouseInfo.spouseSex" readonly></Input>
              </FormItem>
              <FormItem label="配偶出生日期" prop="">
                <Input placeholder="" :value="this.$util.loanModularFormatTime(EdcZxPersonalSpouseInfo.spouseDate)" readonly></Input>
              </FormItem>
              </br>

              <FormItem label="配偶工作单位" prop="">
                <Input placeholder="" v-model="EdcZxPersonalSpouseInfo.spouseWork" readonly></Input>
              </FormItem>
              <FormItem label="信息获取时间" prop="">
                <Input placeholder="" :value="this.$util.loanModularFormatTime(EdcZxPersonalSpouseInfo.spouseWorkDate)" readonly></Input>
              </FormItem>

              <FormItem label="配偶联系电话" prop="">
                <Input placeholder="" v-model="EdcZxPersonalSpouseInfo.spousePhoneDate" readonly></Input>
              </FormItem>
              <FormItem label="信息获取时间" prop="">
                <Input placeholder="" :value="this.$util.loanModularFormatTime(EdcZxPersonalSpouseInfo.spousePhoneDate)" readonly></Input>
              </FormItem>
            </Form>
          </div>
        </Panel>
        <Panel name="5">
          第一联系人
          <div slot="content">
            <Table :columns="FirstOneRelationInfoListtwo" :data="FirstOneRelationInfoList"></Table>
          </div>
        </Panel>
        <Panel name="6">
          第二联系人
          <div slot="content">
            <Table :columns="FirstTwoRelationInfoListtwo" :datqa="FirstTwoRelationInfoList"></Table>
          </div>
        </Panel>
        <Panel name="7">
          贷款申请信息
          <div slot="content">
            <Table :columns="LoanApplyInfoListtwo" :data="LoanApplyInfoList"></Table>
          </div>
        </Panel>
        <Panel name="8">
          贷款交易信息
            <div slot="content">
                信息概要
                <div slot="content">
                  <Form :label-width="120" inline>
                    <FormItem label="未结清贷款笔数:" prop="">
                      <Input placeholder="" v-model="EdcZxPersonalLoanOrderInfo.loanCount" readonly></Input>
                    </FormItem>
                    <FormItem label="首贷日:" prop="">
                      <!--<Input placeholder="" v-model="EdcZxPersonalLoanOrderInfo.loanDate" readonly></Input>-->
                      <DatePicker v-model="EdcZxPersonalLoanOrderInfo.loanDate" :value="EdcZxPersonalLoanOrderInfo.loanDate" type="date"></DatePicker>
                    </FormItem>
                    <FormItem label="最大授信额度:" prop="">
                      <Input placeholder="" v-model="EdcZxPersonalLoanOrderInfo.maxQuota" readonly></Input>
                    </FormItem>
                    <FormItem label="贷款总额:" prop="">
                      <Input placeholder="" v-model="EdcZxPersonalLoanOrderInfo.loanTotal" readonly></Input>
                    </FormItem>
                    <FormItem label="贷款余额:" prop="">
                      <Input placeholder="" v-model="EdcZxPersonalLoanOrderInfo.loanRemainder" readonly></Input>
                    </FormItem>
                    <FormItem label="协定月还款:" prop="">
                      <Input placeholder="" v-model="EdcZxPersonalLoanOrderInfo.monthPayment" readonly></Input>
                    </FormItem>
                    <FormItem label="当前逾期总额:" prop="">
                      <Input placeholder="" v-model="EdcZxPersonalLoanOrderInfo.expireTotal" readonly></Input>
                    </FormItem>
                    <FormItem label="最高逾期金额:" prop="">
                      <Input placeholder="" v-model="EdcZxPersonalLoanOrderInfo.maxExpireMoney" readonly></Input>
                    </FormItem>
                    <FormItem label="最高逾期期数:" prop="">
                      <Input placeholder="" v-model="EdcZxPersonalLoanOrderInfo.maxExpireCount" readonly></Input>
                    </FormItem>
                  </Form>
                </div>
                <div slot="content">
                贷款交易信息详情
                <div slot="content">
                  <Table :columns="LoanOrderDetailsInfoListtwo" :data="LoanOrderDetailsInfoList"></Table>
                </div>
                </div>
                <div slot="content">
                其他
                <div slot="content">
                  <Table :columns="LoanOrderDetailsInfoList1" :data="LoanOrderDetailsInfoList"></Table>
                </div>
                <div slot="content">
                  <Table :columns="LoanOrderDetailsInfoList2" :data="LoanOrderDetailsInfoList"></Table>
                </div>
                <div slot="content">
                  <Table :columns="LoanOrderDetailsInfoList3" :data="LoanOrderDetailsInfoList"></Table>
                </div>
               </div>
            </div>
        </Panel>
        <Panel name="9">
          为他人担保信息
          <div slot="content">
            <Table :columns="GuaranteeInfoListtwo" :data="GuaranteeInfoList"></Table>
          </div>
        </Panel>
        <Panel name="10">
          特殊交易信息
          <div slot="content">
            <Table :columns="SpecialOrderInfoListtwo" :data="SpecialOrderInfoList"></Table>
          </div>
        </Panel>
        <Panel name="11">
          查询记录
          <div slot="content">
            <Table :columns="RecordsInfoListtwo" :data="RecordsInfoList"></Table>
          </div>
        </Panel>
        <Panel name="12">
          个人声明
          <div slot="content">
            <Table :columns="StatementInfoListtwo" :data="StatementInfoList"></Table>
          </div>
        </Panel>
        <Panel name="13">
          资信提示
          <div slot="content">
            <Table :columns="PromptInfoListtwo" :data="PromptInfoList"></Table>
          </div>
        </Panel>

      </Collapse>
    </Card>
  </div>
</template>

<script>
export default {
  name: 'loan-credit-reporting',
  data () {
    return {
      value1: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25],
      value1_1: ['1_1', '1_2', '1_3', '1_4', '1_5', '1_6'],
      item: null,
      datas: [],
      baseUrl: this.$appContext.marvels_core_approve,
      PromptInfoList: [],
      PromptInfoListtwo: [
        {
          title: '项目',
          key: 'item'
        }, {
          title: '提示内容',
          key: 'promptContent'
        }, {
          title: '提示时间',
          key: 'promptDate',
          render: (h, params) => {
            var vm = this
            return h('span', {}, vm.$util.formatTime(params.row.promptDate))
          }
        }
      ],
      StatementInfoList: [],
      StatementInfoListtwo: [
        {
          title: '序号',
          key: 'statementNo'
        }, {
          title: '个人声明内容',
          key: 'statementContent'
        }, {
          title: '声明日期',
          key: 'statementDate',
          render: (h, params) => {
            var vm = this
            return h('span', {}, vm.$util.formatTime(params.row.statementDate))
          }
        }
      ],
      RecordsInfoList: [],
      RecordsInfoListtwo: [
        {
          title: '查询者类型',
          key: 'queryType'
        }, {
          title: '查询原因',
          key: 'queryCause'
        }, {
          title: '查询日期',
          key: 'queryDate',
          render: (h, params) => {
            var vm = this
            return h('span', {}, vm.$util.formatTime(params.row.queryDate))
          }
        }
      ],
      SpecialOrderInfoList: [],
      SpecialOrderInfoListtwo: [
        {
          title: '记录来源',
          key: 'infoSource'
        }, {
          title: '记录类型',
          key: 'infoType'
        }, {
          title: '发生日期',
          key: 'happenDate'
        }, {
          title: '变更月数',
          key: 'months'
        }, {
          title: '发生金额',
          key: 'happenMoney'
        }, {
          title: '明细信息',
          key: 'detailInfo'
        }, {
          title: '信息获取日期',
          key: 'infoDate',
          render: (h, params) => {
            var vm = this
            return h('span', {}, vm.$util.formatTime(params.row.infoDate))
          }
        }
      ],
      GuaranteeInfoList: [],
      GuaranteeInfoListtwo: [
        {
          title: '担保项目',
          key: 'guaranteeItem'
        }, {
          title: '担保日期',
          key: 'guaranteeItem'
        }, {
          title: '担保金额',
          key: 'guaranteeMoney'
        }, {
          title: '担保关系',
          key: 'guaranteeRelation'
        }, {
          title: '信息获取日期',
          key: 'infoDate',
          render: (h, params) => {
            var vm = this
            return h('span', {}, vm.$util.formatTime(params.row.infoDate))
          }
        }
      ],
      LoanOrderDetailsInfoList: [],
      LoanOrderDetailsInfoList3: [
        {
          title: '24月内各月还款状况',
          key: 'repaymentSituation'
        }, {
          title: '逾期31-60天未归还贷款本金',
          key: 'expireOne'
        }, {
          title: '逾期61-90天未归还贷款本金',
          key: 'expireTwo'
        }, {
          title: '逾期91-180天未归还贷款本金',
          key: 'expireThree'
        }, {
          title: '逾期180天以上未归还贷款本金',
          key: 'expireFour'
        }, {
          title: '信息获取日期',
          key: 'infoDate',
          render: (h, params) => {
            var vm = this
            return h('span', {}, vm.$util.formatTime(params.row.infoDate))
          }
        }
      ],
      LoanOrderDetailsInfoList2: [
        {
          title: '帐户状态',
          key: 'accountStatus'
        },
        {
          title: '实际还款日期',
          key: 'actualRepaymentDate',
          align: 'center',
          render: (h, params) => {
            var vm = this
            return h('div', [
              h('span', vm.$util.formatTime(params.row.actualRepaymentDate))
            ])
          }
        },
        {
          title: '实际还款金额',
          key: 'actualRepaymentMoney'
        }, {
          title: '当前逾期总额',
          key: 'expireTotal'
        }, {
          title: '当前逾期期数',
          key: 'expireCount'
        }, {
          title: '累计逾期期数',
          key: 'cumulativeExpireCount'
        }, {
          title: '最高逾期期数',
          key: 'maxExpireCount'
        }
      ],
      LoanOrderDetailsInfoList1: [
        {
          title: '共享授信额度',
          key: 'shareQuota'
        }, {
          title: '最大负债额',
          key: 'maxLiabilities'
        }, {
          title: '还款频率',
          key: 'maxLiabilities'
        }, {
          title: '期末贷款余额',
          key: 'repaymentRate'
        }, {
          title: '剩余还款月数',
          key: 'repaymentMonth'
        },
        {
          title: '本月应还款日期',
          key: 'repaymentDate',
          align: 'center',
          render: (h, params) => {
            var vm = this
            return h('div', [
              h('span', vm.$util.formatTime(params.row.repaymentDate))
            ])
          }
        }, {
          title: '本月应还款金额',
          key: 'repaymentMoney'
        }
      ],
      LoanOrderDetailsInfoListtwo: [
        {
          title: '贷款项目',
          key: 'loanItem'
        }, {
          title: '机构名称',
          key: 'institutionName'
        }, {
          title: '授信额度',
          key: 'quota'
        }, {
          title: '担保方式',
          key: 'guaranteeMode'
        },
        {
          title: '开户日期',
          key: 'kaihuDate',
          align: 'center',
          render: (h, params) => {
            var vm = this
            return h('div', [
              h('span', vm.$util.formatTime(params.row.kaihuDate))
            ])
          }
        },
        {
          title: '币种',
          key: 'currency'
        }, {
          title: '发生地',
          key: 'addr'
        }
      ],
      EdcZxPersonalLoanOrderInfo: {},
      LoanApplyInfoList: [],
      LoanApplyInfoListtwo: [
        {
          title: '申请机构',
          key: 'applyInstitution'
        }, {
          title: '申请时间',
          key: 'applyInstitution'
        }, {
          title: '申请金额',
          key: 'applyMoney'
        }, {
          title: '申请月数',
          key: 'applyMonth'
        }, {
          title: '申请类型',
          key: 'applyType'
        }, {
          title: '申请状态',
          key: 'applyStatus'
        }, {
          title: '信息获取日期',
          key: 'infoDate',
          render: (h, params) => {
            var vm = this
            return h('span', {}, vm.$util.formatTime(params.row.infoDate))
          }
        }
      ],
      FirstTwoRelationInfoList: [],
      FirstTwoRelationInfoListtwo: [
        {
          title: '第二联系人',
          key: 'firstRelation'
        }, {
          title: '联系人关系',
          key: 'relation'
        }, {
          title: '联系电话',
          key: 'relationPhone'
        }, {
          title: '信息获取日期',
          key: 'infoDate',
          render: (h, params) => {
            var vm = this
            return h('span', {}, vm.$util.formatTime(params.row.infoDate))
          }
        }
      ],
      FirstOneRelationInfoList: [],
      FirstOneRelationInfoListtwo: [
        {
          title: '第一联系人',
          key: 'firstRelation'
        }, {
          title: '联系人关系',
          key: 'relation'
        }, {
          title: '联系电话',
          key: 'relationPhone'
        }, {
          title: '信息获取日期',
          key: 'infoDate',
          render: (h, params) => {
            var vm = this
            return h('span', {}, vm.$util.formatTime(params.row.infoDate))
          }
        }
      ],
      EdcZxPersonalSpouseInfo: {},
      EdcZxPersonalQueryInfo: {},
      UnitInfoList: [],
      UnitInfoListtwo: [
        {
          title: '工作单位',
          key: 'workUnit'
        }, {
          title: '职业',
          key: 'profession'
        }, {
          title: '信息获取日期',
          key: 'infoDate',
          render: (h, params) => {
            var vm = this
            return h('span', {}, vm.$util.formatTime(params.row.infoDate))
          }
        }
      ],
      EdcZxPersonalBasicInfo: {},
      AddrInfoList: [],
      AddrInfoListtwo: [
        {
          title: '住址',
          key: 'residenceNo' + '.' + 'residenceUrl'
        }, {
          title: '信息获取日期',
          key: 'residenceUrlDate',
          render: (h, params) => {
            var vm = this
            return h('span', {}, vm.$util.formatTime(params.row.infoDate))
          }
        }
      ]

    }
  },
  methods: {
    initpage: function () {
      this.loadCredit()
    },
    // 征信报告
    loadCredit: function () {
      //  var loanId = this.$route.query.loanId;
      //  var serviceType =this.$route.query.serviceType;
      // //  debugger
      //  var reqNo = this.$route.query.reqNo;
      //  console.log(reqNo,serviceType,loanId);
      var params = {}
      params.loanId = this.$route.query.loanId
      params.serviceType = this.$route.query.serviceType
      params.reqNo = this.$route.query.reqNo
      var vm = this
      this.$ajax.get(this.baseUrl + '/approve/process/credit_reporting/service/getCreditDetail', { params: params }).then(re => {
        var data = re.data
        vm.EdcZxPersonalQueryInfo = data.data.data.EdcZxPersonalQueryInfo || {}
        vm.EdcZxPersonalBasicInfo = data.data.data.EdcZxPersonalBasicInfo || {}
        vm.AddrInfoList = data.data.data.AddrInfoList || []
        vm.UnitInfoList = data.data.data.UnitInfoList || []
        vm.EdcZxPersonalSpouseInfo = data.data.data.EdcZxPersonalSpouseInfo || {}
        vm.FirstOneRelationInfoList = data.data.data.FirstOneRelationInfoList || []
        vm.FirstTwoRelationInfoList = data.data.data.FirstTwoRelationInfoList || []
        vm.LoanApplyInfoList = data.data.data.LoanApplyInfoList || []
        vm.EdcZxPersonalLoanOrderInfo = data.data.data.EdcZxPersonalLoanOrderInfo || {}
        vm.LoanOrderDetailsInfoList = data.data.data.LoanOrderDetailsInfoList || []
        vm.GuaranteeInfoList = data.data.data.GuaranteeInfoList || []
        vm.SpecialOrderInfoList = data.data.data.SpecialOrderInfoList || []
        vm.RecordsInfoList = data.data.data.RecordsInfoList || []
        vm.PromptInfoList = data.data.data.PromptInfoList || []
        // vm.StatementInfoList = data.data.data.StatementInfoList || []
      }).catch(er => {
      })
    }
  },
  created () {
    this.$ajax = this.$util.ajax()
    this.initpage()
    document.getElementsByTagName('title')[0].innerText = '上海资信征信数据-核心管理系统'
  },
  //   watch: {
  //     //点击tab页签，加载数据，只加载一次
  //     "taskParams.creditDataMxServiceImpl_detail"(v) {
  //         // debugger
  //     //   if (v) {
  //     //     this.initpage();
  //     //   }
  //     }
  //   },
  props: {
    taskParams: Object
  }
}
</script>

<style lang="less">
.ivu-input.ivu-input-default{
  color: black;
}
.ivu-table-cell{
  color: black;
}
.ivu-form .ivu-form-item-label{
  color: black;
}
.ivu-form-item {
  margin-bottom: 1px;
}
</style>
